<template>
  <div class="login_xiaomi">
    <div class="login_header">
      <div>
        <div>
          <van-cell is-link @click="showPopup">中文(简体)</van-cell>
          <van-popup
            v-model="show"
            @click="fn_back"
            position="bottom"
            :style="{ height: '100%' }"
          >
            <van-nav-bar border="false" title="标题" left-arrow />
            <h1>选择语言</h1>
            <h3>中文(简体)</h3>
            <h3>中文(繁體)</h3>
            <h3>English</h3>
          </van-popup>
        </div>
      </div>
      <div></div>
    </div>
    <div class="login_id">
      <h3>小米账号登录</h3>
    </div>
    <div class="login_log">
      <div class="login_log_you">有品</div>
      <div>欢迎登录小米有品</div>
    </div>
    <div>
      <van-cell-group>
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" @click="fn_login"
            >登录</van-button
          >
        </div>
      </van-cell-group>
    </div>
    <div class="longin_agree">
      <van-checkbox v-model="checked"
        >已阅读并同意小米帐号<a href="">用户协议</a>和<a href=""
          >隐私政策</a
        ></van-checkbox
      >
      <p><a href="">忘记密码?</a></p>
    </div>
    <div class="login_register">
      <a href="">用户名密码登录</a>
      <span> | </span>
      <a href="" @click="$router.push({path:'/reg'})">立即注册</a>
    </div>
  </div>
</template>

<script>
import { Login } from "@/api";
export default {
  provide() {},
  data() {
    return {
      show: false,
      tel: "",
      checked: true,
      username:"",
      password:"",
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
    fn_back() {
      this.$router.go(0);
      console.log(this.$router);
    },
    async fn_login() {
      const oUser = {
        username: this.username,
        password: this.password,
      };
      const data = await Login(oUser);
      this.queryParams = {
        name: data.data.userinfo.username,
        icon: data.data.userinfo.avatar,
        
      };
      window.localStorage.setItem(
        "queryParam",
        JSON.stringify(this.queryParams) || "[]"
      );
      window.localStorage.setItem(
        "token",
        JSON.stringify(data.data.token) 
      );
      console.log(data.data);
      this.$router.push({ path: "/Shoppingcart" });
    },
  },
};
</script>

<style lang="less" scoped>
.login_xiaomi {
  height: 100vh;
  padding-bottom :50px;
  background-color: black;
  .van-field[data-v-486d2bae] {
    margin-top: 20px;
  }
  opacity: 0.7;

  .login_header {
    /deep/.van-popup {
      color: #ccc;
    }
    h1 {
      font-size: 20px;
      margin: 10px 0 0 20px;
    }
    h3 {
      margin: 30px 0 0 20px;
    }
  }
  .van-cell--clickable {
    background-color: black;
    color: #ccc;
    .van-cell__value {
      color: rgb(82, 77, 77);
    }
  }
  .login_id {
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-size: 20px;
    font-family: "宋体";
  }
  .login_log {
    color: white;
    padding-bottom: 3rem;
    text-align: center;
    font-size: 16px;
    font-family: "宋体";
    .login_log_you {
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 1.2rem;
      margin: 20px auto;
      color: black;
      border-radius: 10px;
      background-color: yellow;
    }
  }
  .van-field {
    width: 60%;
    margin: 0 auto;
    border-radius: 10px;
  }
  .van-button--info {
    width: 70%;
    margin: 0 auto;
  }
  .longin_agree {
    width: 70%;
    margin: 4rem auto;
    color: #ccc;
    p {
      margin-top: 1.5rem;
      a {
        font-size: 16px;
      }
      .van-button {
        margin-top: 1.5rem;
        width: 100%;
      }
    }
    .van-checkbox {
      font-size: 12px;
    }
  }
  .login_register {
    text-align: center;
    font-size: 16px;
    a {
      color: #ccc;
    }
    span {
      color: #ccc;
    }
    .van-field[data-v-486d2bae] {
      margin-top: 20px;
    }
  }
  .van-cell-group {
    background-color: #000;
  }
  .button {
    text-align: center;
    h1 {
      font-size: 20px;
      text-align: center;
      line-height: 50px;
      padding: 20px 0 10px 0;
      color: #ccc;
    }
    input {
      width: 80%;
      //  text-align: center;
      height: 40px;
      margin: 10px 0 10px;
      border-radius: 5px;
      border: none;
    }
    button {
      width: 100px;
      height: 50px;
      background-color: aqua;
      border: none;
      border-radius: 10px;
      margin: 10px 0 0 0;
    }
    .buttondiv {
      color: aliceblue;
      text-align: center;
      font-size: 20px;
      width: 50px;
      height: 30px;
      line-height: 30px;
      border-radius: 5px;
      background-color: rgb(97, 123, 123);
    }
  }
}
</style>
